import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'
import './style.css'
// VEX TABLE
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

// Ant Design Vue
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

// ECharts
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
  DataZoomComponent
} from 'echarts/components'

// 注册必要的组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  ScatterChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
  DataZoomComponent
])

// Import stores for initialization
import { useAuthStore } from '@/store/auth'
import { useThemeStore } from '@/store/theme'
import { useAppStore } from '@/store/app'
import { useMenuStore } from '@/store/menu'

// Create Vue app
const app = createApp(App)

// Register VEX TABLE
app.use(VXETable)

// Register Ant Design Vue
app.use(Antd)

// Register ECharts globally
app.component('VChart', ECharts)

// Create and use Pinia
const pinia = createPinia()
app.use(pinia)

// Use router
app.use(router)

// Initialize stores
const initializeApp = async () => {
  const authStore = useAuthStore()
  const themeStore = useThemeStore()
  const appStore = useAppStore()
  const menuStore = useMenuStore()

  try {
    console.log('🚀 开始初始化应用程序...')
    
    // Set initial loading state
    appStore.setLoading(true)
    
    // Initialize theme first (for visual consistency)
    themeStore.initialize()
    console.log('✅ 主题初始化完成')
    
    // Initialize app store
    appStore.initialize()
    console.log('✅ 应用商店初始化完成')
    
    // Initialize auth store (check for existing session)
    console.log('🔐 开始认证初始化...')
    await authStore.initialize()
    console.log('✅ 认证初始化完成')
    
    // Initialize menu store (after auth is complete)
    console.log('📋 开始菜单初始化...')
    await menuStore.initialize()
    console.log('✅ 菜单初始化完成')
    
    console.log('Application initialized successfully')
  } catch (error) {
    console.error('Failed to initialize application:', error)
    appStore.handleError(error, 'Application Initialization')
  } finally {
    // Always clear loading after initialization
    setTimeout(() => {
      appStore.setLoading(false)
      console.log('✅ 应用初始化loading状态已清除')
    }, 500) // 延迟一点确保视觉效果平滑
  }
}

// Mount app and initialize
const mountApp = async () => {
  try {
    await initializeApp()
    app.mount('#app')
  } catch (error) {
    console.error('Failed to mount application:', error)
    // Still mount the app even if initialization fails
    app.mount('#app')
  }
}

// Handle unhandled errors
window.addEventListener('error', (event) => {
  console.error('Global error:', event.error)
})

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason)
})

// Start the application
mountApp()

export default app
